<template>
  <div id="register">
    <i class="logo"></i>
    <div class="input-block">
      <div class="item">
        <i class="name"></i>
        <input type="text" v-model="nickname" placeholder="昵称" />
      </div>
      <div class="item">
        <i class="mobile"></i>
        <input type="number" v-model="mobile" placeholder="请输入注册的手机号" maxlength="11" />
        <span class="get-code" v-if="!showCountDown" @click="getCode">获取验证码</span>
        <span v-else class="count-down">{{countDown}}s后重新获取</span>
      </div>
      <div class="item">
        <i class="code"></i>
        <input type="number" v-model="code" placeholder="短信验证码" maxlength="6" />
      </div>
      <div class="item">
        <i class="lock"></i>
        <input type="password" v-model="password" placeholder="6-20位密码（投票时使用）" />
      </div>
      <div class="item">
        <i class="lock"></i>
        <input type="password" v-model="newpassword" placeholder="再次确认密码" />
      </div>
    </div>
    <div class="button-block">
      <button @click="register">注册</button>
    </div>
    <div class="md-example-child md-example-child-agree">
      <md-agree v-model="checked" size="md">
        <p class="tip">
          注册即代表您同意i业主软件的
          <span @click="showAgreement(1)">《使用协议》</span>和
          <span @click="showAgreement(2)">《隐私制度》</span>
        </p>
      </md-agree>
    </div>
    <md-landscape v-model="showFullScreen" full-screen>
      <agreement v-if="type == 1"></agreement>
      <privacy v-if="type == 2"></privacy>
    </md-landscape>
  </div>
</template>

<script>
import privacy from "@/components/common/privacy";
import agreement from "@/components/common/agreement";
import { Toast, Dialog, Agree, Landscape } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    agreement,
    privacy,
    [Dialog.name]: Dialog,
    [Agree.name]: Agree
  },
  name: "register",
  data() {
    return {
      staffType: 1, //1家属，2业委会，3物业
      checked: true, // 是否同意i业主平台
      showCountDown: false, //是否显示倒计时
      countDown: 59, //倒计时
      code: "", //验证码值
      nickname: "", //昵称
      mobile: "", //手机号码
      password: "", //密码
      newpassword: "", // 再次确认密码
      showFullScreen: false, //显示协议弹窗
      type: 1 //1协议 2隐私
    };
  },
  computed: {
    wxInfo() {
      return this.$store.getters.getWxInfo;
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      let mobile = this.mobile;
      if (mobile == "") {
        Toast.failed("请先输入手机号");
        return;
      }
      this.showCountDown = true;
      let timer = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          clearInterval(timer);
          this.countDown = 59;
          this.showCountDown = false;
        }
      }, 1000);
      let params = {
        mobile
      };
      https
        .fetchPost(config.getCode2, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed("已发送验证码", 2000);
          } else {
            Toast.failed(res.data.msg, 2000);
            setTimeout(() => {
              this.showCountDown = false;
              clearInterval(timer);
            }, 1500);

            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 验证验证码
    checkedCode(callBack) {
      let mobile = this.mobile;
      let code = this.code;
      let params = {
        mobile,
        code
      };
      https
        .fetchPost(config.checkCode, params)
        .then(res => {
          if (res.data.code == 1) {
            callBack();
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 注册
    register() {
      if (!this.checked) {
        Toast.info("请同意i业主平台条款信息", 2000);
        return;
      }
      let _this = this;
      let nickname = this.nickname;
      let mobile = this.mobile;
      let code = this.code;
      let password = this.password;
      let newpassword = this.newpassword;
      if (nickname == "") {
        Toast.info("请输入昵称", 2000);
        return;
      }
      const verify = /^1[345789]\d{9}$/; //电话号正则
      mobile = mobile.replace(/\s+/g, "");
      if (!verify.test(mobile) && mobile.length != 11) {
        Toast.info("请输入正确手机号", 2000);
        return;
      }
      if (code.length != 6) {
        Toast.info("请输入正确验证码", 2000);
        return;
      }
      if (password == "") {
        Toast.info("请输入密码", 2000);
        return;
      }
      if (password.length < 6 || password.length > 20) {
        Toast.info("密码长度不符合要求", 2000);
        return;
      }
      if (newpassword == "") {
        Toast.info("请输入确认秘密", 2000);
        return;
      }
      if (password != newpassword) {
        Toast.info("两次密码不一致", 2000);
        return;
      }
      let wx_nickname = this.$store.getters.getWxInfo.name;
      let wx_openid = this.$store.getters.getWxInfo.openid;
      let avatar = this.$store.getters.getWxInfo.avatar;
      let callBack = function(res) {
        let params = {
          nickname,
          mobile,
          password,
          newpassword,
          wx_openid,
          wx_nickname,
          avatar
        };
        https
          .fetchPost(config.reg, params)
          .then(res => {
            if (res.data.code == 1) {
              _this.$store.commit("saveUserInfo", res.data.data);
              if (_this.staffType == 1) {
                _this.$router.replace({
                  path: "/shareFolk"
                });
              } else if (_this.staffType == 2) {
                _this.$router.replace({
                  path: "/folkCommitteeStaff"
                });
              } else if (_this.staffType == 3) {
                _this.$router.replace({
                  path: "/folkPropertyStaff"
                });
              } else if (_this.staffType == 4) {
                _this.$router.replace({
                  path: "/smallEstateIndex"
                });
              }else if (_this.staffType == 5) {
                _this.$router.replace({
                  path: "/shareSuggest"
                });
              }
            } else {
              Toast.failed(res.data.msg, 2000);
              return;
            }
          })
          .catch(err => {
            console.log(err);
          });
      };
      this.checkedCode(callBack);
    },
    showAgreement(index) {
      this.type = index;
      this.showFullScreen = true;
    }
  },
  created() {
    this.staffType = this.$route.query.type;
    this.nickname = this.$store.getters.getWxInfo.name

  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#register {
  .logo {
    display: block;
    margin: 80px auto 50px;
    width: 200px;
    height: 124px;
    background: url("/static/images/register/logo.png") center center no-repeat;
    background-size: 100%;
  }
  .nav-login {
    color: #2f86f6;
    font-size: 24px;
    text-align: right;
    padding: 0 90px;
  }
  .md-example-child-agree {
    display: flex;
    padding: 10px 80px;
    font-size: 24px;
    margin-top: 30px;
    .tip {
      width: 100%;
      font-size: 24px;
      color: #999;
      span {
        color: #2f86f6;
      }
    }
  }
  .input-block {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #fff;
    // box-shadow: 0 0 1px 1px #ddd;
    width: 670px;
    padding: 40px 40px 50px;
    border-radius: 20px;
    .item {
      position: relative;
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #eee;
      i {
        width: 80px;
        height: 80px;
        margin-right: 20px;
        &.name {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.mobile {
          background: url("")
            no-repeat center center;
          background-size: 60%;
        }
        &.code {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.lock {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
      }
      input {
        height: 80px;
        border: none;
        width: 500px;
        outline: none;
        color: #333;
        font-size: 26px;
      }
      input::-webkit-input-placeholder {
        color: #999;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #999;
      }
      .get-code {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        background: #2f86f6;
        color: #fff;
        border-radius: 40px;
      }
      .count-down {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        color: #999;
      }
    }
  }
  .button-block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    button {
      border: none;
      width: 600px;
      height: 90px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 32px;
      border-radius: 40px;
      outline: none;
    }
  }
}
</style>
